<!--
        	作者：Spring
        	时间：2015-11-20
        	描述：css 盒子模型
        -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title >css知多少盒子模型</title>
		<style>
			body{
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
        	<!--#div1
        	1.设置的300为内容宽度
        	2.实际宽度为300+border+padding
        	-->
			<div id="div1" style="margin:10px;padding: 10px;border: 6px solid red;height:300px;width: 300px;">
				这是第一个div
			</div>
			<!--#div2-border-box
        	1.设置的300为内容+border+padding 
        	2.即 12+20+内容=300;内容=268
        	-->
			<div id="div2" style="box-sizing: border-box;margin:10px;padding: 10px;border: 6px solid green;height:300px;width: 300px;">
				这是第二个div
			</div>
			<!--
				1.div纵向margin重叠
				2.div1与div2都设置了margin:10px按理说应该是20才对，但是实际情况为10px
			-->
			<div style="border: 10px solid;border-color: #333 transparent transparent transparent;width: 0px;"></div>
	</body>
</html>
